<template>
    <drawer ref="drawer" :show="show" @cancel="cancel" @close="show = false" @confirm="confirm" :showCancle="showCancle" :cancelText="'提交结果'" :title="'救援中工单'+'('+options.length+')'" :confirmText="showCancle?'继续创建':'我知道了'">
        <view class="rescue-list">
            <view v-for="item in options" :key="item.planId" class="rescue-item">
                <view class="rescue-row">
                    <text class="label">电梯</text>
                    <text class="value">{{ item.buildingName }}{{ item.address ? '-' + item.address : '' }}</text>
                </view>
                <view class="rescue-row">
                    <text class="label">状态</text>
                    <text class="value" :style="{ color: getStatusColor(item.statusName) }">{{ item.statusName }}</text>
                </view>
                <view class="rescue-row">
                    <text class="label">报警人</text>
                    <text class="value">{{ item.name }}</text>
                </view>
                <view class="rescue-row">
                    <text class="label">报警时间</text>
                    <text class="value">{{ item.createTime || '-' }}</text>
                </view>
                <view class="rescue-row">
                    <text class="label">备注</text>
                    <text class="value">{{ item.trapDesc || '-' }}</text>
                </view>
             
            </view>
        </view>
    </drawer>
</template>
<script>
import drawer from '@/components/filter-drawer/drawer.vue';
export default {
	components: { drawer },
	props: {
		title: {
			type: String,
			default: '请选择'
		},
		showCancle:{
			type:Boolean,
			default:false
		}

	},
	data() {
		return {
			options: [
			 
			],
			show:false,
		};
	},
	methods: {
		getStatusColor(status) {
			if (status === '调度中') return '#F7B500';
			if (status === '已出发') return '#FF7505';
			if (status === '已到达') return '#68CA00';
			return '#333';
		},
		open(options) {
			this.options = options;
			this.show = true;
		},

		confirm() {
			this.$refs.drawer.close();
			this.$emit('confirm');
			this.show = false;
		},

		cancel() {
			this.show = false;
			this.$emit('cancel');
		}
	}
};

</script>
<style lang="scss" scoped>
.rescue-list{
    background-color: #fff; 
    padding: 0 32rpx;
}

.rescue-item {
    padding: 32rpx 0;
    border-bottom: 1px solid #eee;
}
.rescue-item:last-child{
    border: none;
}

.rescue-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 22rpx;
}
.rescue-row:last-child{
    margin-bottom: 0;
}

.label {
    color: #999;
    font-size: 26rpx;
    margin-bottom: 8rpx;
    line-height: 1.2;
}

.value {
    color: #333;
    font-size: 28rpx; 
    line-height: 1.5;
    word-break: break-all;
}
 
</style>